/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import Container from "../../../components/common/Container";
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import styles from '../Entry_Pro.less';
import cile from '../../../assets/cile.png';
import request from '../../../utils/request';
import MyModal from '../../../components/common/MyModal';
import Echarts_tu from '../echarts2/Echarts_tu';
import moment from 'moment';
import fengshan from '../../../assets/fengshan.png';
import fengshan2 from '../../../assets/fengshan2.gif';

import cileRED from '../../../assets/cileRED.png';
var timeval5
class Entry5 extends Component {
    state = {
        jinshuill: true,
        MyModal1Visible: false,
        echartsData: {},
        unit: ""
    }

    componentDidMount() {
        request({
            url: '/web/redstar/drawing/sludge4',
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    time:data.ret.time,
                    lvyehuikg: data.ret.HXPLC_4_87 == 'False' ? false : true,
                    wunichi1kg: data.ret.HXPLC_4_81 == 'False' ? false : true,
                    wunichi2kg: data.ret.HXPLC_4_84 == 'False' ? false : true,
                    wuniyewei: data.ret.HXPLC_4_110,
                })
            }
        })
        timeval5 = setInterval(() => {
        request({
            url: '/web/redstar/drawing/sludge4',
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    time:data.ret.time,
                    lvyehuikg: data.ret.HXPLC_4_87 == 'False' ? false : true,
                    wunichi1kg: data.ret.HXPLC_4_81 == 'False' ? false : true,
                    wunichi2kg: data.ret.HXPLC_4_84 == 'False' ? false : true,
                    wuniyewei: data.ret.HXPLC_4_110,
                })
            }
        })
    },10000)
    }

    componentWillUnmount(){
        clearInterval(timeval5)
    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };

    onEcharts = (code, unit) => {
        request({
            url: '/web/redstar/plchistory/getPlcHistoryData',
            method: 'POST',
            data: {
                deviceId: 'PLCGK217',
                endDatetimeStr: moment().format("YYYY-MM-DD HH:mm:ss"),
                factorCodes: code,
                pageIndex: 1,
                pageSize: 9999999,
                startDatetimeStr: moment().subtract(3, "hour").format("YYYY-MM-DD HH:mm:ss")

            }
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    MyModal1Visible: true,
                    echartsData: data.ret,
                    unit: unit,
                    title:data.ret.useName
                })
            }
            console.log(data)

        })
    }
    render() {



        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '92vh';
        let tableHeight = 170;
        if (width > 1367) {
            tableHeight = 220;
            containerHeight = '92vh';
        }





        return (
            <div>
                {
                    this.state.MyModal1Visible &&
                    <MyModal
                        width={1200}
                        visible={this.state.MyModal1Visible}
                        title={this.state.title}
                        footerShow={false}
                        destroyOnClose={true}
                        onCancel={this.ModalCancel.bind(this, 'MyModal1Visible')}

                    >
                        <Echarts_tu
                            data={this.state.echartsData}
                            unit={this.state.unit}
                        />
                    </MyModal>

                }
                <Container
                    header={true}
                    style={{ height: containerHeight }}
                >
                    <div className={styles.tu5} style={{ width: "100%", height: "92vh", position: 'relative' }}>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "11%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>数据节点时间 : </div>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "2%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>{moment(Number(this.state.time)).format("YYYY-MM-DD HH:mm:ss")}</div>
                    <div style={{ width: 20, height:20, backgroundColor:'red', position: 'absolute', top: "6%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ width: 20, height:20, backgroundColor:'green', position: 'absolute', top: "1%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ height:20,position: 'absolute', top: "6%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>关闭</div>
                    <div style={{ height:20, position: 'absolute', top: "1%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>运行</div>

                      {/* 压滤液外排泵 */}
                      <img src={this.state.lvyehuikg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '73%', left: '12.8%' }} />


                      <img src={this.state.wunichi1kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '53%', left: '70.3%' }} />
                      <img src={this.state.wunichi2kg ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '73%', left: '70.3%' }} />

                      <div style={{ width: 60, height: 25, backgroundColor: 'blue', position: 'absolute', top: "35%", left: "85%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_4_110', 'm')}>{this.state.wuniyewei}m</div>



                    </div>

                </Container>
            </div>
        )


    }
}
export default Entry5;

